<template>
  <div class="list_menu diy_menu">
    <router-link
        to="/user_center/index"
        class="menu_item"
        :class="{ selected: this.$route.path=== '/user_center/index'}"
    >
      <span class="left_span">个人首页</span>
      <span class="right_span"><b-icon icon="house-fill"></b-icon></span>
    </router-link>
    <router-link
        to="/registered_users/table"
        class="menu_item"
        :class="{ selected: this.$route.path=== '/registered_users/table'}"
        v-if="user_group == '管理员' || $check_action('/registered_users/table','get')">
      <span class="left_span">注册用户</span>
      <span class="right_span"><b-icon icon="house-fill"></b-icon></span>
    </router-link>
    <router-link
        to="/tourist_routes/table"
        class="menu_item"
        :class="{ selected: this.$route.path=== '/tourist_routes/table'}"
        v-if="user_group == '管理员' || $check_action('/tourist_routes/table','get')">
      <span class="left_span">旅游路线</span>
      <span class="right_span"><b-icon icon="house-fill"></b-icon></span>
    </router-link>
    <router-link
        to="/booking_records/table"
        class="menu_item"
        :class="{ selected: this.$route.path=== '/booking_records/table'}"
        v-if="user_group == '管理员' || $check_action('/booking_records/table','get')">
      <span class="left_span">预订记录</span>
      <span class="right_span"><b-icon icon="house-fill"></b-icon></span>
    </router-link>
    <router-link
        to="/unsubscribe_record/table"
        class="menu_item"
        :class="{ selected: this.$route.path=== '/unsubscribe_record/table'}"
        v-if="user_group == '管理员' || $check_action('/unsubscribe_record/table','get')">
      <span class="left_span">退订记录</span>
      <span class="right_span"><b-icon icon="house-fill"></b-icon></span>
    </router-link>
    <router-link
        to="/recruitment_information/table"
        class="menu_item"
        :class="{ selected: this.$route.path=== '/recruitment_information/table'}"
        v-if="user_group == '管理员' || $check_action('/recruitment_information/table','get')">
      <span class="left_span">招聘信息</span>
      <span class="right_span"><b-icon icon="house-fill"></b-icon></span>
    </router-link>
    <router-link
        to="/tourism_classification/table"
        class="menu_item"
        :class="{ selected: this.$route.path=== '/tourism_classification/table'}"
        v-if="user_group == '管理员' || $check_action('/tourism_classification/table','get')">
      <span class="left_span">旅游分类</span>
      <span class="right_span"><b-icon icon="house-fill"></b-icon></span>
    </router-link>
    <router-link
        to="/message/table"
        class="menu_item"
        :class="{ selected: this.$route.path=== '/message/table'}"
        v-if="user_group == '管理员' || $check_action('/message/table','get')">
      <span class="left_span">在线咨询</span>
      <span class="right_span"><b-icon icon="house-fill"></b-icon></span>
    </router-link>

    <router-link
        to="/user/collect"
        class="menu_item"
        :class="{ selected: this.$route.path=== '/collect/list'}"
        v-if="user_group == '管理员' || $check_action('/collect/list','get')">
      <span class="left_span">收藏</span>
      <span class="right_span"><b-icon icon="house-fill"></b-icon></span>
    </router-link>
  </div>
</template>

<script>
import mixin from "@/mixins/page.js";

export default {
  mixins: [mixin],
  data() {
    return {};
  },
  mounted() {
  },
  methods: {},

  components: {},
};
</script>

<style scoped>
.list_menu {
  flex: 0 0 25%;
  border-bottom: 1px solid #eee;
}

.menu_item {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
  border: 1px solid #eee;
  border-bottom: none;
  background-color: #fff;
}

.menu_item.selected {
  background-color: #000;
}

.menu_item.selected span {
  color: #fff;
}

.content {
  flex: 0 0 74%;
}
</style>
